import React from "react";
import {
  Form,
  Select,
  InputNumber,
  Switch,
  Radio,
  Button,
  Upload,
  message,
  Card,
  Input,
  DatePicker,
  TimePicker,
  Checkbox
} from 'antd';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
import moment from 'moment'
const FormItem = Form.Item
const { TextArea } = Input

export default class FormRegister extends React.Component {

  handleSubmit = () => {
    let userInfo = this.props.form;
    this.props.form((err, values) => {
      if (!err) {
        message.success(`${userInfo.userName} 恭喜你，您通过本次表单组件学习，当前密码为：${userInfo.userPwd}`)
      }
    })
  }

  render() {
    const { Option } = Select;

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    const normFile = e => {
      console.log('Upload event:', e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    };

    const config = {
      rules: [{ type: 'object', required: true, message: 'Please select time!' }],
    };

    const offsetLayout = {
      wrapperCol: {
        xs: 24,
        sm: {
          span: 12,
          offset: 6
        }
      }
    }

    return (
      <div style={{ width: '100%' }}>
        <Card>
          <Form
            name="validate_other"
            {...formItemLayout}
            initialValues={{
              ['input-number']: 3,
              ['checkbox-group']: ['A', 'B'],
              rate: 3.5,
            }}
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请检查你的用户名!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请检查你的密码!' }]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item name="radio-group" label="性别">
              <Radio.Group>
                <Radio value="a">男</Radio>
                <Radio value="b">女</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item label="年龄">
              <Form.Item name="input-number" noStyle>
                <InputNumber min={1} max={100} />
              </Form.Item>
            </Form.Item>
            <Form.Item
              name="select"
              label="当前状态"
              hasFeedback
              rules={[{ required: true, message: '请选择' }]}
            >
              <Select placeholder="请选择">
                <Option value="china">白露</Option>
                <Option value="usa">清明</Option>
                <Option value="IK">中秋</Option>
              </Select>
            </Form.Item>

            <Form.Item
              name="select-multiple"
              label="爱好"
              rules={[{ required: true, message: '请选择', type: 'array' }]}
            >
              <Select mode="multiple" placeholder="请选择">
                <Option value="red">吃饭</Option>
                <Option value="green">睡觉</Option>
                <Option value="blue">写代码</Option>
              </Select>
            </Form.Item>

            <Form.Item name="switch" label="是否已婚" valuePropName="checked">
              <Switch />
            </Form.Item>

            <Form.Item name="date-picker" label="生日" {...config}>
              <DatePicker />
            </Form.Item>

            <Form.Item name="time-picker" label="早起时间" {...config}>
              <TimePicker
                defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
              />,
            </Form.Item>
            <Form.Item label="联系地址">
              <TextArea
                placeholder="请输入你的信息"
                autoSize={{ minRows: 2, maxRows: 6 }}
                defaultValue={'福建省莆田市'}
              />
            </Form.Item>
            <Form.Item label="头像">
              <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                <Upload.Dragger name="files" action="/upload.do">
                  <p className="ant-upload-drag-icon">
                    <InboxOutlined />
                  </p>
                  <p className="ant-upload-text">Click or drag file to this area to upload</p>
                  <p className="ant-upload-hint">Support for a single or bulk upload.</p>
                </Upload.Dragger>
              </Form.Item>
            </Form.Item>
            <Form.Item {...offsetLayout}>
              <Checkbox>我已阅读协议</Checkbox>
            </Form.Item>
            <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
              <Button type="primary" htmlType="submit">
                注册
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}